<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>EditableGrid - Demos</title>
		
		<style>
			body { font-family:'lucida grande', tahoma, verdana, arial, sans-serif; font-size:0.8em; }
			a { color: #548dc4; font-weight: bold; text-decoration: none; }
			a:hover { text-decoration: underline; }
			#wrap { width: 650px; margin: auto; }
		</style>
		</style>	
		
	</head>
	
	<body>
	<div id="wrap">
	
		<h2>EditableGrid - Demos</h2>
		
		<p><b>Important:</b> These demonstrations should be run from a webserver (i.e. using the http:// protocol, not the file:// protocol).
		When started from a file:// url, charts will not work and the grid won't load at all in Google Chrome.
		</p>
		
		<p><a href="minimal/index.html">Loading grid from XML</a></p>
		<p>
		This is the minimal demo: see how easy it is to create an EditableGrid.
		Only 3 lines of Javascript code, some minimal inline CSS, and here you go!
		In this demo, the grid structure and data are obtained from an XML URL.
		Of course, you don't have to write this file by hand...
		Features: various built-in data types with built-in validation, edition, sorting
		</p>
		
		<p><a href="json/index.html">Loading grid from JSON</a></p>
		<p>
		This is the exact same minimal demo, but this time the grid structure and data are obtained from a JSON URL.
		</p>

		<p><a href="jsdata/index.html">Creating grid in Javascript</a></p>
		<p>
		Still the same demo, but this time the grid structure and data are created dynamically in Javascript.		
		</p>

		<p><a href="mixed/index.html">Mixing Javascript and XML</a></p>
		<p>
		Still the same demo, but this time the grid structure is created dynamically in Javascript and the grid data is loaded from an XML url.
		Other combinations are of course possible: the point is that metadata (i.e. the definition of columns) can be loaded apart from the data itself.
		</p>
		
		<p><a href="attach/index.html">Attaching grid to an HTML table</a></p>
		<p>
		This is again the exact same minimal demo, but this time the grid data are declared in the HTML file through a classic HTML table.
		Extra column information (mainly the data type) are given using Javascript.
		</p>

		<p><a href="simple/index.html">Loading grid from XML (bis)</a></p>
		<p>
		Here we come back to the first minimal demo and go one little step further.
		We have externalized the CSS and Javascript code and used the "modelChanged" callback to display a message.
		A button in each row allows removing the row.
		We have also included the jQuery and jQuery UI libraries in order to benefit from the date picker for the date column (without any additional code).
		</p>

		<p><a href="full/index.html">Full demonstration</a></p>
		<p>
		Features: 
		<ul>
		<li>client-side pagination</li>
		<li>bar and pie charts</li>
		<li>filtering on the grid and chart</li>
		<li>custom cell and header renderers</li>
		<li>custom cell validators</li>
		<li>option groups</li>
		<li>enumeration providers</li>
		<li>date pickers</li>
		<li>autocomplete fields</li>
		</ul>
		Not featuring:
		<ul>
		<li>read-only columns, rows and cells</li>
		<li>custom cell editors</li>
		<li>custom header editors</li>
		<li>custom row attributes</li>
		</ul>
		</p>
		
	</div>
	</body>

</html>
